<template>
  <view class="buoy" v-if="!isBlackPath && !isShow && showInviteIcon && giftActivitySwitch.midAutumnGift && !showIndexAnimation" :style="'left:' + ((moveX == 0) & (x > 0) ? x + '%' : moveX + 'px') + ';top:' + ((moveY == 0) & (y > 0) ? y + '%' : moveY + 'px')" @touchstart.prevent="drag_start" @touchmove.stop="drag_hmove">
    <!-- <view v-if="!isAni" class="bg" @click="toPage">
      <img :src="`https://staticcdn.youliao.com/static/image/yl_app/guide/${path}${num}.png`" alt="" />
    </view>
    <view v-show="isAni" class="canvasBg" @click="toPage">
      <canvas canvas-id="canvasImage1" style="width: 90px; height: 105px" v-show="num === 1" class="canvas"></canvas>
      <canvas canvas-id="canvasImage2" style="width: 90px; height: 105px" v-show="num === 2" class="canvas"></canvas>
    </view> -->

    <view v-if="getMemberInfo.status === 1" class="bg" @click="toPage('register')">
      <img :src="`https://staticcdn.youliao.com/static/image/www_pc/home/entry.gif`" alt="" />
      <view class="close-icon" :class="{ top0: getMemberInfo.status === 2 }" @click.stop="close('register')">
        <van-icon name="cross" size="24rpx" color="#fff" />
      </view>
    </view>
    <view v-if="getMemberInfo.status === 2" class="bg" @click="toPage">
      <img :src="`https://staticcdn.youliao.com/static/image/www_pc/home/auth.gif`" alt="" />
      <view class="close-icon" :class="{ top0: getMemberInfo.status === 2 }" @click.stop="close('certification')">
        <van-icon name="cross" size="24rpx" color="#fff" />
      </view>
    </view>
    <view v-if="getMemberInfo.status === 3" class="bg" @click="toPage">
      <img :src="`https://staticcdn.youliao.com/static/image/www_pc/home/order.gif`" alt="" />
      <view class="close-icon" :class="{ top0: getMemberInfo.status === 2 }" @click.stop="close">
        <van-icon name="cross" size="24rpx" color="#fff" />
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { trackEventRegisterActivityPopupClick, trackEventCloseRegisterActivityPopupClick, trackEventCloseActivityPageLicenceApplyClick } from "@/utils/matomo/trackEventByYL";

export default {
  props: {
    pageScroll: {
      type: Object,
      default: () => {},
    },
    isShow: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      flag: 0,
      num: 0,
      start: [0, 0],
      x: 76,
      y: 55,
      moveY: 0,
      moveX: 0,
      windowWidth: "",
      windowHeight: "",
      isAni: false,
      path: "",
    };
  },
  computed: {
    ...mapState(["getMemberInfo", "showInviteIcon", "giftActivitySwitch", "showIndexAnimation"]),
    isBlackPath() {
      const routes = getCurrentPages(); // 获取当前打开过的页面路由数组
      const curRoute = routes[routes.length - 1].route; // 获取当前页面路由，也就是最后一个打开的页面路由
      const blackPath = ["pages-activity/inviteToBeMember/index", "pages-activity/inviteToBeMember/register", "pages-customer/customer/enterprise", "pages-customer/customer/enterpriseSuccess", "pages-shop/merchantEnter/home", "pages-shop/merchantEnter/merchantEnterSuccess", "pages-user/register/register", "pages-user/register/registerByMobileVerify", "pages-activity/festival/index", "pages-activity/festival/rulePage"];

      return blackPath.includes(curRoute);
    },
  },
  created() {
    const { windowWidth, windowHeight } = uni.getSystemInfoSync();
    this.windowWidth = windowWidth;
    this.windowHeight = windowHeight;
  },
  mounted() {
    setInterval(() => {
      this.flag++;
      this.flag % 2 === 0 ? (this.num = 2) : (this.num = 1);
    }, 500);
    this.setPath(this.getMemberInfo.status);
  },
  watch: {
    pageScroll(val) {
      this.isAni = val.scrollTop > 560 && val.scrollTop <= 790;
    },
    "getMemberInfo.status": function (val) {
      this.setPath(val);
    },
  },
  methods: {
    ...mapMutations(["setShowInviteIcon"]),
    close(type = "") {
      if (type === "register") {
        trackEventCloseRegisterActivityPopupClick(this.$api);
      } else if (type === "certification") {
        trackEventCloseActivityPageLicenceApplyClick(this.$api);
      }
      this.setShowInviteIcon(false);
    },
    setPath(status) {
      if ([1, 2].includes(this.getMemberInfo.status) && !this.isBlackPath && !this.isShow) {
        this.$nextTick(() => {
          this.path = status === 1 ? "register" : "auth";
          this.canvasImage(1);
          this.canvasImage(2);
        });
      }
    },
    canvasImage(num) {
      const imgUrl = `https://staticcdn.youliao.com/static/image/yl_app/guide/${this.path}${num}.png`;

      uni.getImageInfo({
        src: imgUrl,
        success: res => {
          const ctx = uni.createCanvasContext(`canvasImage${num}`, this);
          ctx.drawImage(res.path, 0, 0, 90, 105);
          ctx.restore();
          ctx.draw(true);
        },
      });
    },
    drag_start(event) {
      this.start[0] = event.touches[0].clientX - event.currentTarget.offsetLeft;
      this.start[1] = event.touches[0].clientY - event.currentTarget.offsetTop;
    },
    // 判断防止悬浮球被拖出页面
    drag_hmove(event) {
      const tag = event.touches;
      if (tag[0].clientX < 0) {
        tag[0].clientX = 0;
      }
      if (tag[0].clientY < 0) {
        tag[0].clientY = 0;
      }
      if (tag[0].clientX > this.windowWidth - 40) {
        tag[0].clientX = this.windowWidth - 40;
      }
      if (tag[0].clientY > this.windowHeight) {
        tag[0].clientY = this.windowHeight;
      }
      this.moveX = tag[0].clientX - this.start[0];
      this.moveY = tag[0].clientY - this.start[1];
    },
    checkLoginStatus() {
      const token = uni.getStorageSync("yl-token");
      if (!token) {
        this.$confirm({
          title: "尚未登录,登录后才可继续!",
          okText: "去登录",
          cancelText: "取消",
          onOk: () => {
            uni.reLaunch({ url: `/pages-user/login/login` });
          },
        });
        return false;
      }
      return true;
    },
    toPage(type = "") {
      if (type === "register") {
        trackEventRegisterActivityPopupClick(this.$api);
      }
      uni.navigateTo({ url: `/pages-activity/festival/index` });
      // if (this.getMemberInfo.status === 1) {
      //   uni.reLaunch({ url: `/pages-user/register/register` });
      // } else if (this.getMemberInfo.status === 2) {
      //   const isLogin = this.checkLoginStatus();
      //   if (isLogin) uni.reLaunch({ url: `/pages-customer/customer/enterprise` });
      // }
    },
  },
};
</script>
<style scoped lang="scss">
.buoy {
  position: fixed;
  z-index: 100;
  .bg {
    width: 90px;
    height: 105px;
    position: relative;
    img {
      width: 90px;
      height: 105px;
      position: absolute;
      left: 0;
      top: 0;
      display: block;
    }
  }
  .close-icon {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    border: 1rpx solid #666;
    border-radius: 50%;
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    background: #666;
  }

  .top0 {
    top: 0;
  }
  .canvasBg {
    width: 90px;
    height: 105px;
    position: relative;
    .canvas {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
</style>
